
<template>
  <div class="components-layout-left leftNav">
    <el-collapse v-model="activeKey" accordion>
      <el-collapse-item title="拖动组件" name="1">
        <ul class="svg-nav-list">
          <li
            v-for="(item, index) in draggableComponentList"
            :key="`${item.type}_${index}`"
          >
            <div class="title">{{item.title}}</div>
            <img :title="item.title"
                 @mousedown="Mousedown(item.type,item.title,item.default_attr,item.create_type)"
                 :src="item.priview_img"
                 draggable="draggable">
          </li>
        </ul>
      </el-collapse-item>
        <el-collapse-item title="绘制组件" name="2">
        <ul class="svg-nav-list">
          <li v-for="(item, index) in drawComponentList"
               :key="`${item.type}_${index}`"
              :class="$store.getters.CurrentlySelectedToolBar.Type==item.type?'toolbar-selected':''">
            <div class="title">{{item.title}}</div>
            <img :title="item.title"
                 @mousedown="Mousedown(item.type,item.title,item.default_attr,item.create_type)"
                 :src="item.priview_img">
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
    <!-- <a-input-search placeholder="搜索组件" /> -->
  </div>
</template>
<script>
export default {
  props: ["svgInfoData"],
  data() {
    return {
      activeKey: ["1"], //当前激活的key
      text: `这里是预留位置.`,
      draggableComponentList: [], //拖动组件
      drawComponentList: [], //绘制类型组件
      chartComponentList: [], //图表类型
    };
  },
  watch: {
    svgInfoData: {
      deep: true,
      handler(val) {
        this.draggableComponentList = val.filter((m) => {
          return m.panel_class == "draggable";
        });
        //console.log(this.draggableComponentList )
        this.drawComponentList = val.filter((m) => {
          return m.panel_class == "draw";
        });
          console.log(this.drawComponentList )
        this.chartComponentList = val.filter((m) => {
          return m.panel_class == "chart";
        });
      },
    },
  },
  methods: {
    /**
     * @description: 点击左侧工具栏触发函数
     * @param {*} type
     * @param {*} title
     * @param {*} default_attr 属性默认值
     * @param {*} create_type 组件创建方式
     * @return {*}
     */
    Mousedown(type, title, default_attr, create_type) {
      let CurrentlySelectedToolBar = {
        Type: type, //选中的工具栏svg类型
        TypeName: title, //选中的工具栏svg类型名称
        Title: title, //选中的工具栏svg标题
        Color: default_attr.color, //选中的工具栏svg颜色
        CreateType: create_type, //选中工具栏的创建方式
        EChartsOption: default_attr.echarts_option,
      };
      this.$store.dispatch(
        "actions/setCurrentlySelectedToolBarAction",
        CurrentlySelectedToolBar
      );
    },
  },
};
</script>
<style lang="less" scoped>
.components-layout-left .ant-input-search-icon {
  font-size: 20px !important;
  color: #1890ff !important;
}
.components-layout-left .ant-collapse,
.components-layout-left .ant-collapse-content,
.components-layout-left .ant-collapse > .ant-collapse-item {
  border-color: #eee !important;
}
.components-layout-left .ant-collapse-content > .ant-collapse-content-box {
  padding: 16px 0;
}
.ant-input-affix-wrapper {
  height: 45px;
  line-height: 45px;
  border: none;
}
.svg-nav-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;

  li {
    position: relative;
    width: calc(33.33% - 30px);
    margin: 0 15px 15px 15px;
    padding: 0;
    border-radius: 50%;
    box-shadow: 1px 1px 5px #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    &:hover {
      box-shadow: 1px 1px 10px #ccc;
    }

    img {
      display: block;
      width: 100%;
    }

    .title {
      display: none;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.4);
      color: #fff;
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      text-align: center;
    }
  }

  &.two-item {
    li {
      width: calc(50% - 30px);
      height: 100px;
      margin-bottom: 25px;
      border-radius: 10px;

      img {
        width: auto;
        height: 100%;
      }
    }
  }
}
.toolbar-selected {
  outline: 1px solid #0cf;
}
::v-deep.leftNav {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  min-width: unset !important;
  max-width: unset !important;
  width: 260px !important;
  z-index: 1;
  overflow: auto;
  .el-collapse-item__content{
    padding:0.16rem
  }
}

</style>